﻿<Divider Orientation="left">Draggable</Divider>

<AntList Bordered DataSource="@data">
    <Header>Header</Header>
    <ChildContent Context="item">
        <ListItem>
            <div draggable="true" @ondrop="e=>OnDrop(e, item)" @ondragstart="e=>OnDragStart(e, item)" ondragover="event.preventDefault()">
                <span><Text Mark>[ITEM]</Text></span>@item
            </div>
        </ListItem>
    </ChildContent>

    <Footer>Footer</Footer>
</AntList>

@code {
    string _dragging;
    void OnDrop(DragEventArgs e, string s)
    {
        if (!string.IsNullOrEmpty(s) && !string.IsNullOrEmpty(_dragging)) {
            System.Diagnostics.Trace.WriteLine(s);
            int index = data.IndexOf(s);
            data.Remove(_dragging);
            data.Insert(index, _dragging);
            _dragging = null;
            StateHasChanged();
        }
    }

    void OnDragStart(DragEventArgs e, string s)
    {
        e.DataTransfer.DropEffect = "move";
        e.DataTransfer.EffectAllowed = "move";
        _dragging = s;
    }

    public List<string> data = new List<string> {
        "Racing car sprays burning fuel into crowd.",
        "Japanese princess to wed commoner.",
        "Australian walks 100km after outback crash.",
        "Man charged over missing wedding girl.",
        "Los Angeles battles huge wildfires."
    };
}